import React from 'react';
import { Card, Icon } from 'antd';
import { ItemPanel, Item } from 'gg-editor';
import styles from './index.less';
import start from './photo/start3.png';
import change from './photo/change3.png';
import flow from './photo/flow.png';
import end from './photo/end3.png';

const FlowItemPanel = () => {
  return (
    <ItemPanel className={styles.itemPanel}>
      <Card bordered={false}>
        <Item
          type="node"
          size="45*45"
          shape="custom-node"
          model={{
            color: '#52c41a',
            reactNodeType: 'start',
          }}
          src={start}
        />

        <Item
          type="node"
          size="90*48"
          shape="flow-rect"
          model={{
            color: '#1890FF',
            label: '流程环节', // 环节名称
            flowNodeCode: '', // 环节编码
            isAuto: undefined, // 是否自动环节
            operMode: undefined, // 处理模式
            objName: '',
            solveList: [],
            formName: '',
            formId: '',
            dataSource: [],
            reactNodeType: 'flow',
          }}
          src={flow}
        />

        <Item
          type="node"
          size="72*72"
          shape="flow-rhombus"
          model={{
            color: '#faad14',
            label: '网关',
            reactNodeType: 'gateway',
            gateWayType: 'exclusGateway',
          }}
          src={change}
        />

        <Item
          type="node"
          size="45*45"
          shape="custom-end"
          model={{
            color: '#d81e06',
            reactNodeType: 'end',
          }}
          src={end}
        />

        <Item
          type="edge"
          // shape="custom-edge"
          model={{
            label: '',
            pathType: undefined,
            params: '',
          }}
        />
      </Card>
    </ItemPanel>
  );
};

export default FlowItemPanel;
